<template>
  <div class="mod-config">
    <basic-container>
      <navigationZXGZ :sign="{ a: true, b: false, c: false,d: false,e: false }"></navigationZXGZ>
      <div v-if="showZhong == 1" class="boxsty zhiBiao">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="模板名称">
                <el-input
                  v-model="dataForm.mbname"
                  placeholder="模板名称"
                  :clearable="true"
                  style="width:150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="创建人">
                <el-input
                  v-model="dataForm.createUserName"
                  placeholder="创建人"
                  :clearable="true"
                  style="width:150px"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList()"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between;border-top: 1px solid #b0bde2;padding-top:10px">
          <div>
            <el-tooltip effect="dark" content="新增" placement="top-start">
              <el-button
                type="primary"
                icon="el-icon-plus"
                circle
                @click="addOrUpdateHandle"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top-start">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delBtn"
              ></el-button>
            </el-tooltip>
          </div>
          <div>

           <!-- <el-button plain type="primary" @click="exportExcel">导出</el-button>-->

          </div>
        </div>
        <el-table
          ref="table"
          style="width: 100%; margin-top: 20px"
          :data="dataList"
          border
          v-if="tableShow"
          v-loading="dataListLoading"
          :default-sort = "{prop: 'createTime', order: 'descending'}"
        >
          <el-table-column
            type="selection"
            width="55"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            type="index"
            width="80"
            header-align="center"
            align="center"
            label="序号"
          ></el-table-column>

          <el-table-column
            prop="mbcode"
            header-align="center"
            align="center"
            min-width="120"
            label="模板编号"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="mbname"
            header-align="center"
            align="center"
            min-width="120"
            label="模板名称"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="description"
            header-align="center"
            align="center"
            min-width="200"
            label="描述"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="createUserName"
            header-align="center"
            align="center"
            label="创建人"
            min-width="180"
            show-overflow-tooltip
          >
            <!--状态展示-->
            <template slot-scope="scope">
              <el-popover placement="top" width="240" trigger="hover">
                <p></p>
                <div
                  v-for="(item, index) in cutout(
                      scope.row.quotaauditStatusstr
                    )"
                  :key="index"
                >
                  <el-badge
                    v-if="scope.row.quotaauditStatus != '0'"
                    :value="item.split('-')[1]"
                    :max="9"
                    class="itembadge"
                  >
                      <span
                        v-if="item.indexOf('已完成') != -1"
                        style="color: #0bbf4a"
                      >{{ item.split("-")[0] }}</span
                      >
                    <span
                      v-else-if="item.indexOf('未完成') != -1"
                      style="color: red"
                    >{{ item.split("-")[0] }}</span
                    >
                    <span v-else>{{ item.split("-")[0] }}</span>
                  </el-badge>
                  <span v-else>{{ item.split("-")[0] }}</span>
                </div>
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.createUserName }}
                 <!-- <span v-if="scope.row.auditState == 0">填报中</span>
                  <span v-else-if="scope.row.auditState == 1"
                  >审核中</span
                  >
                  <span v-else-if="scope.row.auditState == 2"
                  >审核驳回</span
                  >
                  <span v-else-if="scope.row.auditState == 3"
                  >审核完成</span
                  >
                  <span v-else-if="scope.row.auditState == 4"
                  >自评中</span
                  >
                  <span v-else-if="scope.row.auditState == 5"
                  >他评中</span
                  >
                  <span v-else-if="scope.row.auditState == 6"
                  >评价完成</span>
                  <span v-else-if="scope.row.auditState == 7"
                  >已完成</span>
                  <span v-else-if="scope.row.auditState == 8"
                  >未完成</span>-->
                </div>
              </el-popover>
            </template>

          </el-table-column>
          <el-table-column
            prop="createTime"
            header-align="center"
            align="center"
            label="创建时间"
            min-width="200"
            show-overflow-tooltip
            sortable
          >
            <!--流程跟踪-->

            <template slot-scope="scope">
              <div>
                <el-popover placement="top" width="660" trigger="hover">
                  <el-table :data="scope.row.gridData" max-height="400">
                    <el-table-column
                      width="260"
                      property="NAME_"
                      label="任务名称"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="ry_name"
                      label="处理人"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="START_TIME_"
                      label="开始时间"
                      show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                      width="120"
                      property="END_TIME_"
                      label="结束时间"
                      show-overflow-tooltip
                    ></el-table-column>
                  </el-table>
                  <span slot="reference">{{ scope.row.createTime }}</span>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="showMessage(scope.row.proceid)"
                  >流程跟踪</el-button
                  >
                </el-popover>
              </div>
            </template>

          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            width="200"
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain size="small"
                         @click="editDetails(scope.row)">编辑
              </el-button>
              <el-button type="primary" plain size="small"
                         @click="checkDetails(scope.row)">查看
              </el-button>

            </template>
          </el-table-column>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog :visible.sync="showPicDialog" title="流程图" width="100%">
        <div>
          <el-row>
            <el-col :span="12">
              <el-image
                v-if="showPicDialog"
                :headers="headers"
                :src="actPicUrl"
                :preview-src-list="actPicUrlList"
                width="100%"
                class="bg"
              ></el-image>
            </el-col>
            <el-col :span="12"
            ><el-table :data="hisTableData" border style="width: 100%">
              <el-table-column prop="taskId" label="任务ID" width="100">
              </el-table-column>
              <el-table-column
                prop="processInstanceId"
                label="流程实例ID"
                width="100"
              >
              </el-table-column>
              <el-table-column prop="taskName" label="任务名称">
              </el-table-column>
              <el-table-column prop="assignee" label="处理人">
                <template slot-scope="scope">
                  <span>{{ scope.row.assignee }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="start" label="开始时间">
              </el-table-column>
              <el-table-column prop="end" label="结束时间">
              </el-table-column> </el-table
            ></el-col>
          </el-row>
        </div>
      </el-dialog>
      <!-- 弹窗, 新增  -->
      <ZXGZForm
        v-if="addOrUpdateVisible"
        ref="addOrUpdate"
        @refreshDataList="getDataList"
        @openZhibiao="openZhibiao"
        :addDataForm="addDataForm"
        @refreash="refreashdata"
      ></ZXGZForm>
      <!-- 弹窗, 查看  -->
      <zxgzDetailTable
        ref="zxgzdetail"
        @fnBackLastPage="fnBackLastPage"
      ></zxgzDetailTable>
      <!-- 弹窗, 修改  -->
      <editDialog
        :editDialogData="editDialogData"
        @editDialogDataChildren="editDialogDataChildren"
      ></editDialog>
    </basic-container>

  </div>
</template>

<script>

import { exportExcel } from "@/api/hetongrenwu/zhuanxianggongzuo/zxgzmbcj";
import ZXGZForm from "@/views/hetongrenwu/zxgz/zxgzmbcj/mbcj/zxgz-form";
import zxgzDetailTable from "@/views/hetongrenwu/zxgz/zxgzmbcj/mbcj/zxgz-table-detail";
import editDialog from "./zxgz-table-update";
import { radioTwoList } from "@/api/hetongrenwu/hetonghtxxdjb";
import UserCommonSelect from "@/views/hetongrenwu/components/usercomment-select";
import {
  getzxgzcjpage,
  deleteBatchcj,
} from "@/api/hetongrenwu/zhuanxianggongzuo/zxgzmbcj";

import temManagement from "@/views/hetongrenwu/components/temManagement.vue";
import { mapGetters } from "vuex";
import {showMessage} from "@/api/activiti/task";

export default {
  components: {
    ZXGZForm,
    temManagement,
    UserCommonSelect,
    zxgzDetailTable,
    editDialog
  },
  data() {
    return {

      dataForm: {},
      dataList: [],
      dataListLoading: false,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      showZhong: 1,
      addOrUpdateVisible: false,
      addDataForm: {},
      searchadvanced: true,
      searchheight: "0",
      radioTwo: "-1",
      hisTableData: [],
      actPicUrlList: [],
      actPicUrl: "",
      showPicDialog: false,
      radioTwoList: radioTwoList,
      editDialogData: {},
      temanagementDialogData: {},
      showType: 1,
      tableShow: true,
      fullscreenLoadingend:false,
      fullscreenLoadingsmit:false,
      jsonData:[],
      shouyuerendataList:[],
      chooseVisible:false,
      temList:[],
      fullscreenLoadingmb:false,
    };
  },
  created() {
    this.getDataList();
    //this.fngetListMb()
  },
  watch: {},
  computed: {
      ...mapGetters(["permissions"]),
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    //编辑
    editDetails(row) {
        this.editDialogData = {
            visible: true,
            rows: row,
        };
    },
    editDialogDataChildren() {
        this.getDataList();
    },
    //查看
    checkDetails(row) {
        this.$nextTick(() => {
            this.$refs.zxgzdetail.init(row);
        });
    },
    fnBackLastPage(data) {
        if (data == "返回原页面") {
            this.getDataList();
        }
    },

    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      getzxgzcjpage(
        Object.assign({
          current: this.pageIndex,
          size: this.pageSize,
          mbname: this.dataForm.mbname,
          createUserName: this.dataForm.createUserName,

        })
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      });
    },
      // 新增 / 修改
      addOrUpdateHandle(id) {
         /* getZxgzFaQi().then((res) => {
              this.addDataForm = res.data.data;
              if (this.addDataForm === null) {
                  this.$message.error("当前没有启动中的任务！");
                  return false;
              }

              this.addOrUpdateVisible = true;
              this.$nextTick(() => {
                  this.$refs.addOrUpdate.init(id);
              });
          });*/
          this.addOrUpdateVisible = true;
          this.$nextTick(() => {
              this.$refs.addOrUpdate.init(id);
          });
      },
      //新增子集返回的数据(关闭修改页面，打开指标库维护)
      openZhibiao(data) {
          this.addOrUpdateVisible = false;
          this.zhiShow = 2;
          this.zhibiaoForm = {
              enter: 0,
              disabled: false,
          };
      },
    // 删除
    delBtn() {
      var data = this.$refs.table.selection;
      var ids = "";
      if (data.length == 0) {
        this.$message.warning("请勾选所要删除的数据");
      } else {
        data.forEach((ele) => {
          ids = ids + ele.id + ",";
        });
        this.$confirm("是否删除当前勾选的数据！", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            deleteBatchcj({ ids: ids }).then((res) => {
              this.$message.success("删除成功");
              this.getDataList();
            });
          })

      }
    },
    refreashdata(data) {
        if (data == 1) {
            this.getDataList();
        }
        if (data == "closeDialog") {
            this.getDataList();
            this.addOrUpdateVisible = false;
        }
    },
    temManagementChildren(data) {
      this.getDataList();
    },
    switchBtn(e) {
      this.showType = e;
      this.tableShow = false;
      this.$nextTick((res) => {
        this.tableShow = true;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    cutout(cellValue) {
        if (cellValue) {
            var c = cellValue.split(",");
            if (c.size < 1) {
                c.push("-");
                c.push("-");
            } else if (c.size < 2) {
                c.push("-");
            }
            return c;
        }
    },
    //导出
    exportExcel() {
        var data = this.$refs.reftable.selection;
        if (data.length == 0) {
            this.$message.closeAll();
            this.$message.error("请选择一个专项工作！");
            return;
        }
        var ids = [];
        for (var i = 0; i < data.length; i++) {
            ids.push(data[i].id);
        }
        var filename = "";
        if (ids.length > 1) {
            filename = "专项工作.zip";
        } else {
            filename = "专项工作" + data[0].contractName + ".zip";
        }
        checkSign(ids).then((res) => {
            if (res.data.data == "true") {
                exportExcel({ ids: ids }).then((response) => {
                    this.$message.closeAll();
                    this.$message.success("导出成功!");
                    let url = window.URL.createObjectURL(new Blob([response.data]));
                    let link = document.createElement("a");
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", filename);
                    document.body.appendChild(link);
                    link.click();
                });
            } else {
                this.$message.closeAll();
                this.$message.error(res.data.data);
            }
        });
    },
    customBtn(){
      this.jsonData = JSON.stringify(this.shouyuerendataList);
      this.$nextTick(() => {
        this.$refs.usercomment.init("12", 'allTree', this.jsonData,'htcj');
      });
    },
    temsubmitBtn(e){
      var params = {
        rows: this.$refs.table.selection,
        type: 1,
        templateId: e.id,
      };
      this.fullscreenLoadingmb = true;
      submitStatusAll(params)
        .then((res) => {
          this.chooseVisible = false;
          this.getDataList();
          this.fullscreenLoadingmb = false;
          this.$message.success("提交成功");
        })
        .catch((res) => {
          this.chooseVisible = false;
          this.fullscreenLoadingmb = false;
          this.$message.warning("提交失败");
        });
    },
    submitfy(data){
      console.log(data)
      var ids = ""
      data.tableDataUser.forEach(ele=>{
        ids = ids+ ele.userId + ','
      })
      this.fullscreenLoadingsmit = true;
        submitStatusAll({rows:this.$refs.table.selection,ids:ids,type:2})
          .then((res) => {
            this.$message.closeAll();
            this.$message({
              type: "info",
              message: res.data.data + "条任务已提交",
            });
            this.fullscreenLoadingsmit = false;
            this.chooseVisible = false;
            this.getDataList();
          })
          .catch(() => {
            this.$message({
              type: "error",
              message: "提交失败!",
            });
            this.fullscreenLoadingsmit = false;
            this.chooseVisible = false;
          });
    },
    showMessage(proId) {
      showMessage(proId).then((res) => {
        this.hisTableData = res.data.data;
        //console.log(res.data.data)
      });
      this.actPicUrl = `/act/sp/view/` + proId;
      this.actPicUrlList = [];
      this.actPicUrlList.push(`/act/sp/view/` + proId);
      this.showPicDialog = true;
    },
  }
};
</script>

<style>
</style>
